const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // mode: 'production',
  mode: 'development',
  entry: './src/main.js',
  output: {
    "path": path.join(__dirname, '/dist'),
    "filename": "js/chunk-[fullhash].js"
  },
  devServer: {
    port: 8080,
    open: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html' // 以此为基准生成打包后html文件
    }),
    new VueLoaderPlugin()
  ],
  // 处理其它文件模块规则
  module: {
    rules: [
      {
        // 如果是.vue文件，使用如下的loader
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css|.less$/, // 正则匹配 .css和.less文件
        // 匹配成功后（从后向前；从右到左）
        // 1. 先用less-loader去加载.less文件,转成css
        // 2. 先用css-loader去加载css文件
        // 3. 再用style-loader把样式以style标签的方式嵌入到html中

        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
}